<template>
	<div>
		<table cellpadding='0' cellspacing='0'>
			<tr>
				<td>一级类型ID</td>
				<td>顺序</td>
				<td>一级类型名称</td>
				<td>二级节点信息</td>
				<td>子类型添加</td>
			</tr>
			<tr v-for="(item , i) in typelist" :key="item.id">
				<td>{{item.id}}</td>
				<td>{{item.prio}}</td>
				<td>{{item.name}}</td>

				<td>
					<div v-for="index in item.children" :key="index.id">
						<div style="display: flex; width: 100%;" >
							<div>
								{{index.name}}
							</div>
							<div>
								<td>
									<el-button type="text" @click="goupdate(index.id)"><i class="el-icon-edit"></i></el-button>
									<el-dialog title="类型信息" :visible.sync="dialogFormVisible">
										<el-form :model="from">
											<el-form-item label="一级ID" :label-width="formLabelWidth">
												<el-input v-model="from.id" autocomplete="off"></el-input>
											</el-form-item>
											<el-form-item label="一级类型名称" :label-width="formLabelWidth">
												<el-input v-model="from.name" autocomplete="off"></el-input>
											</el-form-item>
											<el-form-item label="顺序" :label-width="formLabelWidth">
												<el-input v-model="from.prio" autocomplete="off"></el-input>
											</el-form-item>
										</el-form>
										<div slot="footer" class="dialog-footer">
											<el-button type="primary" @click="update">修改</el-button>
										</div>
									</el-dialog>
								</td>
							</div>
							<div>
								<i class="el-icon-delete"></i>
							</div>
						</div>
						
					</div>
				</td>
				<td>
					<el-button type="text" @click="add(item.id)">添加</el-button>
					<!-- <el-dialog title="类型信息" :visible.sync="dialogFormVisible2">
						<el-form :model="from">
							<div v-model="from.pid=1"></div>
		
							<el-form-item label="一级类型名称" :label-width="formLabelWidth">
								<el-input v-model="from.name" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="顺序" :label-width="formLabelWidth">
								<el-input v-model="from.prio" autocomplete="off"></el-input>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button type="primary" @click="add1">添加</el-button>
						</div>
					</el-dialog> -->
				</td>
			</tr>
		</table>
	</div>
</template>

<script>
	export default {
		name: 'SecondType',
		data() {
			return {
				typelist: [],
				dialogTableVisible: false,
				dialogFormVisible: false,
				formLabelWidth: '120px',
				typelist: [],
				from: {
					id: '',
					pid:'',
					name: '',
					prio: '',
				}
			}
		},
		methods: {
			add(id){
				console.log(id);
				this.dialogFormVisible2 = true;
				this.$get("/api/adm/type/findById/" + id).then((resp) => {
					this.from = resp.data.data;
					console.log(this.from);
					if(this.from.id==id){
						this.$router.push({
							path:"/adm/add2/",
							query:{
								id1:id,
								name1:this.from.name
							}
						});
						
					}else{
						console.log(11);
					}
					 // resp.data.data.push(this.from);
					// this.from = resp.data.data
					
				})
			},
			// add1(){
			// 	this.dialogFormVisible2 = true;
			// 	let fd=new FormData();
			// 		fd.append('id',this.from.id);
			// 		fd.append('pid',this.from.pid);
			// 		fd.append('name',this.from.name);
			// 		fd.append('prio',this.from.prio);
			// 		console.log(fd);
			// 		this.$axios.post("/api/adm/type/add", fd).then((resp) => {
			// 			if(resp.status==200){
			// 				this.from=resp.data.data;
			// 				this.dialogFormVisible=true;
			// 				this.from={
			// 					id: '',
			// 					pid:'',
			// 					name: '',
			// 					prio: '',
			// 				}
			// 				console.log(resp.data.data);
			// 			}
			// 		}).catch((error)=>{
			// 			console.log(error);
			// 		})
			// },
			goupdate(id) {
				this.dialogFormVisible = true;
				this.$get("/api/adm/type/findById/" + id).then((resp) => {
					this.from = resp.data.data
				})
			},
			update() {
				this.dialogFormVisible = false;
				this.$postf("/api/adm/type/add", this.from).then((resp) => {
					this.getAllType()
				})
			},
			getAllType() {
				this.$get("/api/adm/type/findAll2").then((res) => {
					if (res.status == 200) {
						console.log(res.data.data);
						var typelist = res.data.data;
						console.log(typelist);
						var news = [];
						//先给假设所有的类型都是第一层，都添加一个children的数组
						typelist.forEach((type) => {
							//type.children = [];//给每个类型都添加一个children的数组
							news[type.id] = {
								...type,
								children: []
							};
						});
						console.log(news);
						console.log(news[0]);

						const newtypes = [];
						typelist.forEach((type) => {
							if (type.pid == 0) {
								//newtypes.push(type);
								newtypes.push(news[type.id]);
							} else {
								//var parent = type;//这样拿不到这个pid的父类型
								var parent = news[type.pid]; //先拿父类型
								console.log('pid : ');
								console.log(parent);
								if (parent) {
									parent.children.push(news[type.id]); //拿到子类型
									//parent.children.push(type);
								}
								console.log('添加完后 : ');
								console.log(parent);
							}
						});
						console.log(newtypes);
						this.typelist = newtypes;
						this.typelist.sort((a, b) => a.prio - b.prio);
						this.typelist.forEach((item) => {
							item.children.sort((a, b) => a.prio - b.prio);
						})
						console.log('数组' + this.typelist);
					}
				})
			}
		},
		mounted() {
			this.getAllType();
		}
	}
</script>

<style>
	td {
			width: 22%;
			border: 1px solid gainsboro;
		}
	
		.find-type1 {
			width: 90%;
			margin: auto;
		}
	
		.find-type1 .head {
			height: 50px;
			line-height: 50px;
		}
	
		.find-type1 .head button {
			margin-left: 300px;
	
		}
</style>
